import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    color: "#333333"

    id: rootItem

    property real sliderValue: 1

    radius: 4
    border.width: 1
    border.color: "#444444"

    Slider{
        height: parent.height - 30
        anchors.centerIn: parent
        orientation: Qt.Vertical
        width: parent.width
        value: sliderValue
        id: slider
        from: 0
        to: 1

        onMoved: {
            if(sliderValue !== value)
                sliderValue = value
        }

        background: Rectangle {
                    anchors.centerIn: parent
                    width: 4
                    height: parent.availableHeight
                    radius: 2
                    color: "#9d9d9d"
                }

        Rectangle {
            color: "#efefef"
            radius: 2
            x: parent.leftPadding + parent.availableWidth / 2 - width / 2
            y: parent.topPadding + parent.visualPosition * parent.availableHeight
            width: 6
            height: parent.availableHeight - y
        }

        handle: Rectangle {
            color: "#efefef"
            x: parent.leftPadding + parent.availableWidth / 2 - width / 2
            y: parent.topPadding + parent.visualPosition * (parent.availableHeight - height)
            implicitWidth: 10
            implicitHeight: 10
            radius: 6
            border.color: "#9f9f9f"
            border.width: 2
        }
    }
}
